<template>  
 
    <div class="location-container1" :style="cardStyle1">
    <img :src="imageSrc.src" :style="imageStyle1" alt="Location Image" />  
    <div class="text-content">   
      <p class="title">Welcome to our humble B&B</p>  
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>  
    </div>


    <div class="location-card1" v-for="(card, index) in cards" :key="index" :style="cardsStyle1">  
      <img :src="card.image" :style="imagesStyle1" :alt="card.title" class="card-image" />  
      <div class="card-content">  
        <h3 class="card-title">{{ card.title }}</h3>  
        <p class="card-text">{{ card.description }}</p>  
      </div>  
    </div>  

    <div class="book">
      <p class="book-button-text">come hang out with us</p>
    <button class="book-button" @click="goToBooking(index)">Go to booking</button>  
  </div>

  <div class="location-card2" v-for="(card, index) in card22" :key="index" :style="cardsStyle2">  
      <img :src="card.image" :style="imagesStyle2"  class="card-image" /> 
    </div>  

  <div class="location-container2" :style="cardStyle2">
    <img :src="imagesSrc.src" :style="imageStyle2" alt="Location Image" />  
  </div>  
</div>
</template>  
  
<script setup>  
import { ref, onMounted, onBeforeUnmount } from 'vue';  
  
const imageSrc = ref({  
  src: './img/2.jpg',  
  title: 'Image 2'  
});  
  
const cardStyle1 = ref({  
  // 这里定义卡片的基本样式  
  display: 'flex',  
  flexDirection: 'row', // 修改为行内布局 
  flexWrap: 'wrap', // 允许换行
    
  justifyContent: 'center',  
  padding: '20px' // 添加内边距使文本不紧贴边缘  
});  

const imageStyle1 = ref({  
  // 这里定义图片的样式  
  width: '100%',  
  height: 'auto',  
  marginBottom: '10px' // 在图片下方添加外边距，使文本与图片之间有间距  
});

const cards = ref([  
  {  
    image: './img/3.jpg',  
    title: 'Bed',  
    description: 'Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor	incididunt ut labore et dolore.	',  
  },  
  {  
    image: './img/4.jpg',  
    title: 'Breakfast',  
    description: 'Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor	incididunt ut labore et dolore.	',  
  },  
  {  
    image: './img/5.jpg',  
    title: 'Surf',  
    description: 'Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor	incididunt ut labore et dolore.	',  
  },  
]);  

const cardsStyle1 = ref({  
  display: 'flex',
  flexDirection: 'column', // 卡片内容垂直排列
  alignItems: 'center',
  justifyContent: 'center',
  padding: '10px', // 内边距
  margin: '10px', // 卡片之间的外边距
  borderRadius: '10px', // 添加圆角
  width: 'calc(33.33% - 20px)', // 三个卡片并排，减去外边距的宽度
  boxSizing: 'border-box',
  height: 'auto', // 卡片高度
  overflow: 'hidden', // 超出部分隐藏  
});   
const imagesStyle1 = ref({  
  // 这里定义图片的样式  
  width: '100%',  
  height: 'auto',  
  marginBottom: '10px' // 在图片下方添加外边距，使文本与图片之间有间距  
});    



const imagesSrc = ref({  
  src: './img/6.jpg',  
  title: 'Image 2'  
});  
const cardStyle2 = ref({  
  // 这里定义卡片的基本样式  
  display: 'flex',  
  flexDirection: 'row', // 修改为行内布局 
  flexWrap: 'wrap', // 允许换行
    
  justifyContent: 'center',  
  padding: '20px' // 添加内边距使文本不紧贴边缘  
});  

const imageStyle2 = ref({  
  // 这里定义图片的样式  
  width: '100%',  
  height: 'auto',  
  marginBottom: '10px' // 在图片下方添加外边距，使文本与图片之间有间距  
});

const card22 = ref([  
  {  
    image: './img/7.jpg',  
    title: 'Bed',  
    description: 'Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor	incididunt ut labore et dolore.	',  
  },  
  {  
    image: './img/8.jpg',  
    title: 'Breakfast',  
    description: 'Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor	incididunt ut labore et dolore.	',  
  },    
]);  

const cardsStyle2 = ref({  
  display: 'flex',
  flexDirection: 'column', // 卡片内容垂直排列
  alignItems: 'center',
  justifyContent: 'center',
  padding: '10px', // 内边距
  margin: '10px', // 卡片之间的外边距
  
  borderRadius: '10px', // 添加圆角
  width: 'calc(50% - 20px)', // 三个卡片并排，减去外边距的宽度
  boxSizing: 'border-box',
  height: 'auto', // 卡片高度
  overflow: 'hidden', // 超出部分隐藏  
});   
const imagesStyle2 = ref({  
  // 这里定义图片的样式  
  width: '100%',  
  height: 'auto',  
  marginBottom: '10px' // 在图片下方添加外边距，使文本与图片之间有间距  
}); 


const goToBooking = (index) => {  
  // 这里您可以添加跳转到预订页面的逻辑  
  console.log(`Booking for ${cards.value[index].title} clicked.`);  
  // 例如，您可以使用router进行页面跳转  
  // router.push('/booking/' + index);  
}; 
// 响应式逻辑，根据窗口大小动态改变样式  
const updateStyles = () => {  
  const windowWidth = window.innerWidth;  
  if (windowWidth < 600) {  
    // 在小屏幕下，你可能想要调整卡片或图片的样式  
    // 例如，减少内边距或更改布局等  
    cardStyle1.value.padding = '10px'; // 减少内边距以适应小屏幕 
    cardStyle2.value.padding = '10px'; 
    cardsStyle1.value.padding = '10px';
    cardsStyle2.value.padding = '10px';
  } else {  
    // 在大屏幕下恢复默认样式  
    cardStyle1.value.padding = '20px';
    cardStyle2.value.padding = '20px'; 
    cardsStyle1.value.padding = '20px'; 
    cardsStyle2.value.padding = '20px';   
  }  
};  
  
onMounted(() => {  
  console.log('Component mounted!');  
  updateStyles(); // 组件挂载后更新样式  
  window.addEventListener('resize', updateStyles); // 监听窗口大小变化并更新样式  
});  
  
onBeforeUnmount(() => {  
  window.removeEventListener('resize', updateStyles);  
});  
</script>  
  
<style scoped>  
.location-container {  
  /* 这里定义卡片的样式 */  
  border: 1px solid #ddd; /* 添加边框以区分卡片 */  
  max-width: 800px; /* 设置卡片最大宽度 */  
  margin: 0 auto; /* 水平居中 */  
} 
.location-card {  
  border: 1px solid #ddd; /* 添加边框以区分卡片 */  
  max-width: 800px; /* 设置卡片最大宽度 */  
  margin: 0 auto; /* 水平居中 */  
}  
.location-cards-container{  
  /* 这里定义卡片的样式 */  
  border: 1px solid #ddd; /* 添加边框以区分卡片 */  
  max-width: 800px; /* 设置卡片最大宽度 */  
  margin: 0 auto; /* 水平居中 */  
  
}
.text-content {  
  /* 这里定义文本内容的样式 */  
  text-align: center; /* 文本居中显示 */  
}  
.text-content .title{  
  font-weight: bold;
}  
.card-title{
  font-weight: bold;
  text-align: center;
}
.book {  
  width: 100%;  
  display: flex; /* 使用flexbox布局 */  
  flex-direction: column; /* 子元素垂直排列 */  
  align-items: center; /* 子元素在交叉轴上居中 */  
  justify-content: center; /* 子元素在主轴上居中 */  
  padding: 20px; /* 添加一些内边距 */  
  box-sizing: border-box; /* 确保padding不会增加元素的宽度 */  
}  
.book-button-text{
  font-weight: bold;
  text-align: center;
  margin: 25px;
}
.book-button{
  padding: 10px; /* 添加一些内边距 */  
  font-size: 1rem; /* 字体大小可以根据需要调整 */ 
  background-color: #c8d7f6;
}
@media (max-width: 600px) {  
  .book-button-text {  
    font-size: 0.8rem; /* 在小屏幕上减小字体大小 */  
  }  
    
  .book-button {  
    font-size: 0.9rem; /* 在小屏幕上减小按钮字体大小 */  
  }  
}
</style>